<template>
  <div>
    <logo-img></logo-img>
    <b-container class="p-1 pt-lg-0 pb-lg-1 pl-lg-3 pr-lg-3">
      <b-breadcrumb class="bg-white xr-shad mt-1 mb-0">
        <b-breadcrumb-item href="/">
          <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
          萧然技术博客
        </b-breadcrumb-item>
        <b-breadcrumb-item @click="toAllAr">{{title}}</b-breadcrumb-item>
        <b-breadcrumb-item href="" active>{{subTitle}}</b-breadcrumb-item>
      </b-breadcrumb>
    </b-container>
    <b-container>
      <b-row>
        <b-col class="col-lg-7 col-md-12 col-sm-12 mt-1 p-1 pt-lg-0 pb-lg-0 pl-lg-3 pr-lg-3" ref="content">
          <h2 class="text-center m-1 m-lg-2">{{data.title}}</h2>
          <div v-html="data.content" class="useFont1"></div>
        </b-col>
        <b-col class="col-lg-5 d-lg-block d-none mt-1">
          <article-intro :data="introdata"></article-intro>
        </b-col>
      </b-row>
    </b-container>
    <copy-info></copy-info>
  </div>
</template>

<script>
export default {
  name: 'ArDetail',
  data () {
    return {
      introdata: {},
      data: {},
      test: 0,
      title: '',
      subTitle: ''
    }
  },
  methods: {
    getArDetail: async function () {
      const rst = await this.axios.get('getArDetail/' + this.$route.params.cid + '/' + this.$route.params.id)
      this.data = JSON.parse(rst.data.data)
      this.subTitle = this.data.title
      const that = this
      await this.$options.methods.getNameByCid(that)
      const titlellq = document.title
      document.title = this.subTitle + ' - ' + this.title + ' - ' + titlellq
    },
    getintrodata: async function (num) {
      const rst = await this.axios.get('getIntroAr/' + num)
      this.introdata = JSON.parse(rst.data.data)
    },
    getNameByCid: async function (that) {
      const rst = await that.axios.get('getNameByCid/' + that.$route.params.cid)
      that.title = rst.data.data
    },
    toAllAr: function () {
      this.$router.push({
        name: 'allAr',
        params: {
          cid: this.$route.params.cid,
          page: 1,
          orderBy: 'create_time'
        }
      })
    }
  },
  created () {
    // const loading = this.$loading({
    //   lock: true,
    //   text: '页面渲染中，请稍候',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // })
    // setTimeout(() => {
    //   loading.close()
    // }, 1500)
    this.getArDetail()
    this.getintrodata(5)
    // this.getNameByCid()
  }
  // updated () {
  //   var height = window.getComputedStyle(this.$refs.content).height
  //   var height = this.$refs.content.offsetHeight
  //   var num = height / 286
  //   this.getintrodata(parseInt(num) + 1)
  //   console.log(parseInt(num) + 1)
  // }
}
</script>
<style>
  .article-content p img{
    width: 100%;
    height: auto;
  }
  .article-down{overflow:hidden;width:100%}
  .article-down a{
    background:#5298ff;
    color:#fff!important;
    padding:5px 10px;font-size:12px;
    display:inline-block;
    border:1px solid #5298ff;
    border-radius:7px;
    float:left;
    margin:5px;
  }
</style>
